<!DOCTYPE html>
<html style="height: 100%;">
    <head>
    	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title><g:layoutTitle default="Grails" /></title>
        <link rel="stylesheet" href="${resource(dir:'css',file:'main.css')}" />
        <link rel="shortcut icon" href="${resource(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
        <g:javascript library="prototype"/>
        <g:javascript library="scriptaculous" />
		<g:javascript library="application" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
		//<![CDATA[
			var map;
			var stationIcons = [ "${resource(dir:'images/icons',file:'violet.png')}",
								 "${resource(dir:'images/icons',file:'green.png')}",
								 "${resource(dir:'images/icons',file:'orange.png')}",
								 "${resource(dir:'images/icons',file:'red.png')}"]
			function initialize() {
    			var latlng = new google.maps.LatLng(28.291564,-15.82913);
    			var myOptions = {
	      			zoom: 8,
	      			center: latlng,
	      			mapTypeId: google.maps.MapTypeId.TERRAIN,
	      			mapTypeControl: false,
	      			navigationControl: false,
	      			streetViewControl: false
<%--	      			mapTypeControlOptions: {position: google.maps.ControlPosition.RIGHT},--%>
<%--	      			navigationControlOptions : {position: google.maps.ControlPosition.LEFT}--%>
    			};
    			map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
  			}
			//]]>
		</script>
		<g:layoutHead />
    </head>
    <body onload="initialize(); addStations()" style="height: 100%;margin:0">
    	<div id="spinner" class="spinner" style="display:none;">
			<img src="${createLinkTo(dir:'images',file:'ajax-loader.gif')}" alt="Spinner" />
		</div>
        <g:layoutBody />
    </body>
</html>